import React from 'react';
import { connect } from 'react-redux';
import BaseComponent from '../../components/common/baseComponent.js';
import BarcodeModal from '../../components/code/barcodeModal';
import { getQueryParam } from '../../utils/url';
import { genBarcode, genQrcode } from '../../services/code';

@connect(() => {
  return {
  };
})
class PayCode extends BaseComponent {
  state = {
    showModal: false,
    qrCode: null,
    barCode: null,
    code: null,
  }

  componentDidMount() {
    const code = getQueryParam('couponCode');
    const id = getQueryParam('id');
    this.setState({
      code,
    });
    genBarcode(code).then((barCode) => {
      this.setState({ barCode });
    });
    genQrcode(code).then((qrCode) => {
      this.setState({ qrCode });
    });
    this.props.dispatch({
      type: 'code/updateActive',
      payload: true,
    });

    this.props.dispatch({
      type: 'code/fetchCouponQRStatus',
      payload: {
        couponDetailId: id,
      },
    });
  }

  componentWillUnmount() {
    this.props.dispatch({
      type: 'code/updateActive',
      payload: false,
    });
  }

  showFullScreen = () => {
    this.setState({
      showModal: true,
    });
  }

  render() {
    const { barCode, qrCode, code } = this.state;
    return (
      <div className="pay-code pay-code-escort">
        <div className="wrapper">
          <p className="header">使用时请出示此码完成支付，每日只能使用一张</p>
          <div className="circle-row">
            <div className="circle left" />
            <div className="circle right" />
          </div>
          <div className="content">
            <img className="barcode" alt="" src={barCode} onClick={() => this.modal.show()} />
            <div className="show-num" onClick={() => this.modal.show()}>点击可查看数字号码</div>
            <img className="qrcode" alt="" src={qrCode} />
          </div>
        </div>

        <BarcodeModal ref={modal => this.modal = modal} code={code} barcode={barCode} />
      </div>
    );
  }
}

export default PayCode;

